<title>编辑角色</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>编辑角色</cite></a>
    </div>
</div>

<form class="layui-form" action="" method="post" lay-filter="LAY-role-form-edit">
    <script type="text/html" template lay-url="/admin/roles/{{d.params.id}}"
            lay-done="layui.data.done(d);">

        <input type="hidden" name="id" value="{{d.result.id}}"/>
        <input type="hidden" name="roleDef" value="{{d.result.roleDef}}"/>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input"
                           lay-verify="required" value="{{d.result.name}}">
                </div>
            </div>
        </div>
    </script>

    <!--xtree容器 begin-->
    <div id="system-role-edit-layui-xtree"
         style="width:65%;height:65%; border:1px solid black; margin-left: 70px;margin-bottom: 20px;overflow:auto;float:left;"></div>
    <!--xtree容器 end-->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="LAY-role-form-update">立即提交</button>
        </div>
    </div>
</form>

<script>
    var xtree;
    layui.use(['admin', 'form'], function () {
        var $ = layui.$
            , admin = layui.admin
            , setter = layui.setter
            , layer = layui.layer
            , response = setter.response
            , form = layui.form;

        form.on('submit(LAY-role-form-update)', function (data) {
            if (data.field.roleDef === 'true') {
                layer.msg('默认角色不可更改', {
                    icon: 2
                });
                return false;
            }
            var menuIds = []
            layui.each(xtree.GetChecked(), function (index, item) {
                if (item.value && item.value !== 'on') {
                    menuIds.push(item.value);
                }
            });
            admin.req({
                url: '/admin/roles/'+data.field.id
                , type: 'put',
                contentType:"application/json"
                , traditional: true
                , data: JSON.stringify({
                    menuAuthIds: menuIds,
                    name: data.field.name
                })
                , success: function (res) {
                    var statusCode = response.statusCode;
                    if (res[response.statusName] == statusCode.ok) {
                        layer.closeAll('page');  //关闭page的弹框
                        layer.msg('更新成功', {
                            icon: 1
                        });
                    }
                }
            });
            return false;
        });

    });

    layui.data.done = function (d) {
        layui.use(['form'], function () {
            var form = layui.form

            xtree = new layuiXtree({
                elem: 'system-role-edit-layui-xtree'           //放xtree的容器，id，不要带#号（必填）
                , form: form                       //layui form对象 （必填）
                , data: '/admin/options?menu_tree&roleId='+d.result.id    //服务端地址（必填）
                , ckall: true,
                titleKey: 'name',
                valueKey: 'id',
                dataKey: 'children'
            });

            form.render(null, 'LAY-role-form-edit'); //渲染该模板下的动态表单
        });
    };
</script>
